<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>监听器的使用</title>
  <script src="/js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- vue提供了一种通用的方式，用来观察和响应vue实例上数据发生的变化，即监听器 
        监听器是通过Vue实例的选项对象的watch属性来的定义的 
    -->
    <p>{{name}}</p>
    <p>{{value}}</p>
    <button @click="value++">button</button>
    <p>{{price}}</p>
    <button @click="priceChange()">button</button>
    <p>比原价贵了{{expensive}}元</p>
    <p>{{hobbies}}</p>
    <p>{{total}}</p>
  </div>
<br>
  <script>
    let app = new Vue({
      el:"#app",
      data:{ 
        name:'Shane',
        value:100,
        price:100,
        expensive:0,
        hobbies:['篮球','足球','排球'],
        obj:{
            age:12,
            gender:'man'
        }
      },
      methods: {
        priceChange(){
            this.price += 20
        }
      },
      computed:{
        total(){
            return this.value + this.price
        }
      },
      watch:{//监听器
        //里面也是键值对
        // key值必须何监听的data里面的key值 ，名字必须相同
        
        // 键值对中的值必须是匿名函数
        name(){
          //监听字符串  
          console.log("字符串name发生改变")  
        },
        value(newValue,oldValue){
          // 监听值  
          console.log("值value发生改变")
          console.log("newValue",newValue);
          console.log("oldValue",oldValue);
        },
        price(newValue,oldValue){
            this.expensive = newValue - oldValue
        },
        hobbies(){
            // 监听数组
            console.log("数组hobbies发生改变") 
        },
        // obj(){
        //     // 监听对象
        //     // 简单的监听方式没办法监听对象，这个时候需要用到深度监听
        //     console.log("对象obj发生改变") 
        // }
        obj:{//深度监听，改用对象语法来监听
            //1. deep 键值对，决定此监听方式是否为深度监听 值为布尔值 true 开启 false 关闭
            deep:true,
            //2. handler键值对，监听方法
            handler(newValue,oldValue){
                console.log("对象发生改变",newValue,oldValue);
            },
            immediate:true // 此监听器进入页面是否直接执行
        },
        total(){
            // 监听计算属性
            // 如果我们监听计算属性，与计算属性相关的data数据发生改变，则触发
            console.log("计算属性发生改变");
        }

      }
    })
  </script>
</body>
</html>